<template>
  <div class="forward-log">
    <div style="display:flex;">
      <p style="line-height: 40px;margin:0px 10px;">
        时间范围：
      </p>
      <el-date-picker
      v-model="timeValue"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right">
    </el-date-picker>
    <el-button style="margin:0px 10px;" class="btn" @click="search">搜索</el-button>
    </div>
    <el-row :gutter="20">
        <el-col :span="10">
          <div  style="border-right: solid #c3c3c3 1px;height: 1000px;">
          <el-table :data="stat" style="width: 100%" @row-click="selectHandler"  border :row-class-name="tableRowClassName">
            <el-table-column prop="wx_name" label="客服号" width="200px"/>
              <el-table-column prop="type_peng" label="朋友圈转发"/>
                <el-table-column prop="type_qun" label="群聊转发"/>
                <el-table-column  label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="selectHandler(row)">详情</el-button>
          </template>
          </el-table-column>
          </el-table>
        </div>
          </el-col>
          <el-col :span="14">
            <div style="font-size:22px;color:999;line-height:35px; margin-left:20px;">{{currentWxName}}</div>
            <el-table  border :data="pageData" style="width: 100%;border-top:1px solid #ccc;height:600px;">
              <el-table-column label="序号" type="index" width="50px"/>
            <el-table-column prop="wx_name" label="客服号" width="200px"/>
              <el-table-column label="客户" width="200px">
                  <template slot-scope="scope">
                    <p class="kehu" @click="gouser(scope.row)">{{scope.row.friend_name}}</p>
                  </template>
                </el-table-column>
                <el-table-column label="截图">
                  <template slot-scope="scope">
                    <div style="display:flex;flex-direction: row;">
                      <div v-for="item in scope.row.img_url.split(',')">
                     
                        <img :src="item" class="imgimg" style="width:150px;" @click="showImg(item)"/>
                   
                    </div>
                  </div>
                  </template>
                </el-table-column>
                <el-table-column label="类型" width="200px">
                  <template slot-scope="scope">
                    {{scope.row.type==0?'朋友圈':'群聊'}}
                  </template>
                </el-table-column>
                <el-table-column label="创建时间" width="200px">
                  <template slot-scope="scope">
                    {{getTime(new Date(scope.row.create_time))}}
                  </template>
                </el-table-column>
          </el-table>
          <!--分页-->
          <div class="pagination">
            <el-pagination
              @size-change="getforwardPage"
              @current-change="getforwardPage"
              :current-page.sync="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size.sync="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
          </el-col>
      </el-row>
      <el-dialog class="dialog-visible" :visible.sync="imgshow" append-to-body>
      <img class="circle-send-dialog" width="100%" :src="imgUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
import { forwardStat,forwardPage } from '@/api/admin/custom'
import { mapGetters, mapState } from 'vuex'
import dayjs from 'dayjs'

export default {
  name: 'forwardLog',

  data() {
    return {
      stat: [],
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      timeValue: [new Date(new Date().setHours(0, 0, 0, 0)),new Date(new Date().setHours(23, 59, 59, 999))],
      currentWxId:'',
      currentWxName: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      pageData:[],
      imgUrl:'',
      imgshow:false,
    }
  },
  computed: {
    ...mapGetters({
      currentUser:'currentUser',
    })
  },
  mounted() {
    this.getforwardStat();
  },
  watch: {
    timeValue(val){
      this.getforwardStat();
      this.getforwardPage();
    }
  },
  methods: {
    
    search(){
      this.getforwardStat();
    },
    showImg(url){
      if(url){
        this.imgshow=true;
        this.imgUrl=url;
      }
    },
    gouser(val){
      let jump={
        wxid:val.wxid,
        fid:val.friendid,
      }
      this.$router.replace({ name: 'conversation',query:{
        jump:JSON.stringify(jump)
      }})
    },
    tableRowClassName({row, rowIndex}) {
      if(this.currentWxId==row.wxid){
        return 'clickrow';
      }
      return '';
    },
    selectHandler(row){
      console.log(this.currentUser);
      this.currentWxId=row.wxid;
      this.currentWxName=row.wx_name;
      this.currentPage=1;
      this.getforwardPage();
    },
    getTime(date){
      //返回 yyyy-mm-dd hh:MM:ss
      return dayjs.unix(date.getTime()/1000).format('YYYY-MM-DD HH:mm:ss')
    },
    getforwardStat(){
      let data={
        cid: this.currentUser.SupplierId,
      }
      if(this.timeValue){
        data.start_time=this.getTime(this.timeValue[0])
        data.end_time=this.getTime(this.timeValue[1])
      }
      forwardStat(data).then(res => {
        this.stat=res.data;
        this.selectHandler(this.stat[0]);
      })
    },
    getforwardPage(){
      if(!this.currentWxId){
        this.total=0
        this.pageData=[]
        return
      }
      let data={
        wxid: this.currentWxId,
        rows: this.pageSize,
        page: this.currentPage
      }
      if(this.timeValue){
        data.start_time=this.getTime(this.timeValue[0])
        data.end_time=this.getTime(this.timeValue[1])
      }
      forwardPage(data).then(res => {
        if (res.code === 0) {
            this.pageData=res.data.list || [];
            this.total = res.data.total || 0
          }
      })
    }
  }
}
</script>

<style>
.clickrow{
  background-color: #ddd !important;
}
.kehu{
  color: #409EFF;
}
.kehu:hover{
  cursor: pointer;
}
.imgimg:hover{
  cursor: pointer;
}
.forward-log{

}
</style>
